<template>
  <div id="consumerlist"> 


          <el-table :data="consumerdata" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
          :row-class-name="tableRowClassName"  :border="true">

                <el-table-column label="注册时间"  align='center' width="200px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.register_time }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="账号"  align='center' width="150px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="ID"  align='center' width="100px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.uid }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="用户名"  align='center' width="150px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="邀请码"  align='center' width="100px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.invite_code }}</span>
                    </template>
                </el-table-column>
                 <!-- <el-table-column label="头像"  align='center' width="100px">                   
                    <template slot-scope="scope">                   
                       <img  style="width: 30px; height: 30px" :src="urlimg + scope.row.head_img" /> 
                    </template>
                </el-table-column> -->
                 <el-table-column label="头像"  align='center'  width="150" >                   
                    <template slot-scope="scope">                   
                         <span v-if="scope.row.head_img">
                             <el-image 
                                style="width: 30px; height: 30px"
                                :src="urlimg + scope.row.head_img" 
                                :preview-src-list="scope.row.tx_picture" class="imga">
                            </el-image>
                        </span>
                        <span v-else>暂未上传</span>    
                    </template>
                </el-table-column>
                <el-table-column label="级差等级"  align='center' width="150px">                   
                    <template slot-scope="scope"> 
                          <span>{{ scope.row.grade }}</span>        
                    </template>
                </el-table-column>
                <el-table-column label="所属团队"  align='center' width="330px">                   
                    <template slot-scope="scope">    
                        <span v-if="scope.row.leader == null">暂无</span>               
                        <span v-else>名称：{{ scope.row.leader.nickname }} 手机号:{{ scope.row.leader.telphone }}</span>
                    </template>
                </el-table-column>
                 <!-- <el-table-column label="级别"  align='center' width="100px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.experience }}</span>
                    </template>
                </el-table-column> -->
                  <el-table-column :label="variable_name1"  align='center' width="150px">                   
                    <template slot-scope="scope"> 
                          <span>{{ scope.row.kmb }}</span><span  class="see_span" @click="gojf_but(scope.row,1,'果米')"><i class="el-icon-view el-icon--right"></i></span>         
                    </template>
                </el-table-column>
                <el-table-column :label="variable_name2"  align='center' width="150px">                   
                    <template slot-scope="scope"> 
                           <span>{{ scope.row.gdb }}</span>   <span  class="see_span" @click="gojf_but(scope.row,2,'金豆')"><i class="el-icon-view el-icon--right"></i></span>                
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name3"  align='center' width="150px">                   
                    <template slot-scope="scope"> 
                           <span>{{ scope.row.dob }}</span>   <span  class="see_span" @click="gojf_but(scope.row,3,'金赚')"><i class="el-icon-view el-icon--right"></i></span>
                    </template>
                </el-table-column>
                 <el-table-column label="当前持有"  align='center' width="150px">                   
                    <template slot-scope="scope">  
                           <span>{{ scope.row.hold_count }}</span>   <span  class="see_span"  @click="gohold_but(scope.row,1,'当前持有')"><i class="el-icon-view el-icon--right"></i></span>               
                    </template>
                </el-table-column>
                <el-table-column label="待收货"  align='center' width="150px">                   
                    <template slot-scope="scope">  
                           <span>{{ scope.row.hold_wait_count }}</span>   <span  class="see_span" @click="goharvested_but(scope.row,2,'待收获')"><i class="el-icon-view el-icon--right"></i></span>                       
                    </template>
                </el-table-column>
                 <el-table-column label="已收货"  align='center' width="150px">                   
                    <template slot-scope="scope">  
                         <span>{{ scope.row.hold_produced_count }}</span>   <span  class="see_span" @click="goisharvested_but(scope.row,3,'已收获')"><i class="el-icon-view el-icon--right"></i></span>              

                    </template>
                </el-table-column>
                 <el-table-column label="推荐人"  align='center' width="250px">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.inviter">{{ scope.row.inviter.nickname }} - {{ scope.row.inviter.telphone }}</span>
                        <span v-else>暂无</span>
                    </template>
                </el-table-column>
                  <el-table-column label="好友数"  align='center' >                   
                    <template slot-scope="scope"> 
                        
                         <span> {{ scope.row.direct_invite_count }} </span>
                    </template>
                </el-table-column>
                 <el-table-column label="团队数"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.sub_invite_count - 1}}</span>
                    </template>
                </el-table-column>
                 <!-- <el-table-column label="微信收款码"  align='center' width="100px" >                   
                    <template slot-scope="scope"> 
                                   
                        <el-image v-if="scope.row.srcListwx"
                            style="width: 30px; height: 30px"
                            :src="urlimg + scope.row.srcListwx" 
                            :preview-src-list="scope.row.srcList1" class="imga">
                        </el-image>
                         <span v-else>暂未上传</span>     
                           
                    </template>
                </el-table-column>
                 <el-table-column label="支付宝收款码"  align='center' width="150px" >                   
                    <template slot-scope="scope">                   
                           <el-image v-if="scope.row.srcListzfb"
                                style="width: 30px; height: 30px"
                                :src="urlimg + scope.row.srcListzfb" 
                                :preview-src-list="scope.row.srcList2" class="imga">
                             </el-image>
                             <span v-else>暂未上传</span>    
                           
                    </template>
                </el-table-column>
                 <el-table-column label="云闪付收款码"  align='center' width="150px" >                   
                    <template slot-scope="scope">                   
                           <el-image v-if="scope.row.srcListysf"
                                style="width: 30px; height: 30px"
                                :src="urlimg + scope.row.srcListysf" 
                                :preview-src-list="scope.row.srcList3" class="imga">
                             </el-image>
                             <span v-else>暂未上传</span>    
                           
                    </template>
                </el-table-column>
                 <el-table-column label="聚合收款码"  align='center' width="150px" >                   
                    <template slot-scope="scope">                   
                           <el-image v-if="scope.row.srcListjh"
                                style="width: 30px; height: 30px"
                                :src="urlimg + scope.row.srcListjh" 
                                :preview-src-list="scope.row.srcList4" class="imga">
                             </el-image>
                             <span v-else>暂未上传</span>    
                           
                    </template>
                </el-table-column>
                 <el-table-column label="银行卡收款码"  align='center' width="150px" >                   
                    <template slot-scope="scope">                   
                           <el-image v-if="scope.row.srcListyhk"
                                style="width: 30px; height: 30px"
                                :src="urlimg + scope.row.srcListyhk" 
                                :preview-src-list="scope.row.srcList5" class="imga">
                             </el-image>
                             <span v-else>暂未上传</span>    
                           
                    </template>
                </el-table-column> -->
                
                  <el-table-column label="收款码"  align='center' width="200px">                   
                    <template slot-scope="scope" >  
                           <span >
                                <img src="@/assets/images/a3.png" style="width:20px;height:20px;margin-left:10px;"  @click="mtk2_but(scope.row)"/>
                           </span>
                    </template>
                </el-table-column>
                 <el-table-column label="信用分"  align='center' width="200px">                   
                    <template slot-scope="scope" >  
                           <span >{{ scope.row.credit_score }}</span>
                    </template>
                </el-table-column>

                  <el-table-column label="正常/冻结状态"  align='center' width="150">                   
                    <template slot-scope="scope">     
                        <span v-if="scope.row.frozen == 0">正常</span>              
                        <span v-if="scope.row.frozen == 1">冻结</span>
                    </template>
                  </el-table-column>

                   <el-table-column label="权限显示"  align='center' width="250">                   
                    <template slot-scope="scope">
                         <span v-for="(a,b) in scope.row.privilege_str" :key="b">          
                                <span v-for="(item,index) in limits_form.select_data" :key="index">
                                    <span v-if="item.maid == a" style="padding:0px 3px;">{{item.title}}</span>
                                </span> 
                        </span>             
                    </template>
                  </el-table-column>

                   <el-table-column label="挂卖权限"  align='center'  fixed="right">                   
                    <template slot-scope="scope">                   
                        <el-switch  
                            :active-value="active_gm" 
                            :inactive-value="isactive_gm" 
                            v-model="scope.row.privilege_status" 
                            @change="switchchange_gm(scope.row)"  
                            active-color="#F5CF49" 
                            inactive-color="#E5E5E5"> 
                         </el-switch> 
                    </template>
                </el-table-column>

                   <el-table-column label="冻结登录"  align='center'  fixed="right">                   
                    <template slot-scope="scope">                   
                        <el-switch  
                            :active-value="active" 
                            :inactive-value="isactive" 
                            v-model="scope.row.frozen_login" 
                            @change="switchchange(scope.row)"  
                            active-color="#F5CF49" 
                            inactive-color="#E5E5E5"> 
                         </el-switch> 
                    </template>
                </el-table-column>

                
 
                 <el-table-column label="操作" align='center' width="300px"  fixed="right">
                    <template slot-scope="scope">
                        <el-button  v-if="scope.row.frozen == 1" size="mini"  class="button_class1"  plain @click="jd_but(scope.row,'jd')">用户解冻</el-button> 
                        <!-- <el-button size="mini"  type="primary"  plain  @click="pass_but(scope.row,'pass')">重置密码</el-button>  -->
                        <el-button size="mini"  type="primary"  plain class="button_class2" @click="set_but(scope.row)">重置密码</el-button>
                        <el-button size="mini"  type="primary"  plain class="button_class1" @click="limits_but(scope.row)">权限设置</el-button> 
                        <!-- <el-button size="mini"  type="primary"  plain @click="pass_ej_but(scope.row)">二级密码</el-button> -->
                    </template>
                </el-table-column>
  
            </el-table>  




    <el-dialog title="权限设置" :visible.sync="limits_mtk"  width="400px" >
          <el-form ref="form" :model="limits_form"  label-width="100px" style="width:100%;">
                 <el-form-item label="" label-width="0px">
                      <el-select  v-model="limits_form.select_num" multiple placeholder="请选择果种" style="width:100%;">
                          <el-option  v-for="(item,index) in limits_form.select_data" :key="index" :label="item.title" :value="item.maid"></el-option>
                       </el-select>
                 </el-form-item>
                 <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="limits_but_qr()">确认</el-button>
                 </div>
         </el-form>
   </el-dialog> 


     <!-- 设置二级密码 -->
        <el-dialog title="设置二级密码" :visible.sync="ej_mtk"  width="350px">
            <div style="width:100%;"> 
           
            <el-form ref="form" :model="ej_form"   label-width="100px" style="width:100%;">  
                <el-row>         
                    <el-form-item label="" label-width="0px">
                       <el-input    v-model="ej_form.number" placeholder="请输入二级密码"></el-input>
                    </el-form-item> 
                </el-row> 
            </el-form>

            <div style="text-align: center;width:70%;margin:auto;">
                <el-button type="primary" style="width:80%;" class="custom_color_button" @click="pass_ej_but_qr()">确认</el-button>
            </div>

            </div> 
        </el-dialog>


    <el-dialog title="用户验证" :visible.sync="user_test.user_mtk"  width="400px" >
          <el-form ref="form" :model="user_test"  label-width="100px" style="width:100%;">
                <el-form-item label="" label-width="0px">
                    <el-input v-model="user_test.password" placeholder="二级密码" ></el-input>
                </el-form-item>
                <el-form-item label="" label-width="0px" >
                    <div style="display:flex;">
                        <el-input v-model="user_test.phone" placeholder="手机验证码" style="flex:1;"></el-input>
                         <el-button class="code_but1 custom_color_button" type="primary"  @click="getCode_yz()" :disabled="user_test.disabled" style="margin-left:10px;">
                          {{ user_test.codeText }}
                        </el-button>
                    </div>
                </el-form-item>
                <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="user_mtk_but">确认</el-button>
                </div>
         </el-form>
   </el-dialog> 



   <el-dialog title="密码设置" :visible.sync="paw_mtk"  width="300px" >    
            <div style="display: flex;justify-content: space-around;">
                <el-button size="mini"  type="primary"  plain class="button_class1"  @click="pass_but(my_uid,'pass')">重置密码</el-button>
                <el-button size="mini"  type="primary"  plain class="button_class2"  @click="pass_ej_but(my_uid)">二级密码</el-button>
            </div>
   </el-dialog> 

   <el-dialog :title="mtk2_from.telphone + '-收款方式'" :visible.sync="mtk2"  width="700px" >
                  <div class="title_box" style="margin-top:-30px;">
                      <div class="dian"></div>
                      <div class="title_name">用户信息</div>
                </div>
                 <div class="box_top">
                    <div class="box_top_img">
                    <img :src="urlimg + mtk2_from.datalist.head_img" />
                    </div>
                    <div class="box_top_con">
                    <div class="box_top_name">{{ mtk2_from.datalist.nickname }}</div>
                    <div class="box_top_id">ID:{{ mtk2_from.datalist.telphone }}</div>
                    </div>
                </div>
                <div class="title_box" style="margin-top:10px;">
                      <div class="dian"></div>
                      <div class="title_name">收款码</div>
                </div>
                <div class="box_img_box">
                    <div class="item_img_box">                  
                          <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListwx"
                                :src="urlimg + mtk2_from.datalist.srcListwx" 
                                :preview-src-list="mtk2_from.datalist.srcList1" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                           </span> 
                         <div class="item_img_name">收款码（微信）</div>
                     </div>
                     <div class="item_img_box">                     
                        <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListzfb"
                                :src="urlimg + mtk2_from.datalist.srcListzfb" 
                                :preview-src-list="mtk2_from.datalist.srcList2" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                         <div class="item_img_name">收款码（支付宝）</div>
                     </div>
                     <div class="item_img_box">                   
                          <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListysf"
                                :src="urlimg + mtk2_from.datalist.srcListysf" 
                                :preview-src-list="mtk2_from.datalist.srcList3" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                           </span>
                          <div class="item_img_name">收款码（云闪付）</div>
                     </div>
                     <div class="item_img_box">                  
                         <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListjh"
                                :src="urlimg + mtk2_from.datalist.srcListjh" 
                                :preview-src-list="mtk2_from.datalist.srcList4" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                          <div class="item_img_name">收款码（聚合）</div>
                     </div>
                     <div class="item_img_box">
                           <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListyhk"
                                :src="urlimg + mtk2_from.datalist.srcListyhk" 
                                :preview-src-list="mtk2_from.datalist.srcList5" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                         <div class="item_img_name">收款码（银行卡）</div>
                     </div>
                </div>

           </el-dialog> 




   </div>
</template>

<script>

export default {
   name: 'consumerlist',
   props:{
      consumerdata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        user_name:'',
        limits_mtk:false,
        limits_form:{
            select_data:[],
            select_num:[],
            input:''
        },
        my_uid:'',
        user_test:{  //用户判定
            user_mtk:false, //用户判定模态狂
            codeText:'获取验证码', //获取验证码字
            totalTime:60,  //获取验证码秒
            disabled:false, //禁用获取验证码
            password:'', //二级密码
            phone:'',  //验证码
            my_state:'', //判断是那种类型出现弹出框
        },
        active:1,
        isactive:0,
        ej_mtk:false,
        ej_form:{
            number:''
        },
        active_gm:1,
        isactive_gm:0,
        

        paw_mtk:false,

        mtk2:false,
        mtk2_from:{
            datalist:{},
           telphone:'',
           head_img:'',
           nickname:''
        },

    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 255
      this.gz_list()
  },
  mounted (){
    
  },
  methods: {
    gz_list(){
        this.post("/manor/listOfData", {
             
	        }).then(res => {
                this.limits_form.select_data = res.result.list
                //console.log(res)
         })
    },
    user_mtk_but(){
        this.getCode_yz_qr().then(res => {
            console.log(res)
            if(res == 1){
                switch (this.user_test.my_state){
                        case 'pass':
                            this.pass_but_qr();
                            break;
                        case 'jd':
                            this.jd_but_qr();
                            break;
                        default :
                            alert("参数错误");
                            break;
                        }
            }
        })
  
    },
    limits_but(row){
         this.my_uid = row.uid
         this.limits_mtk = true
         this.limits_form.select_num = row.privilege_str
    },
    limits_but_qr(){ 
        this.limits_fun()   
    },
    limits_fun(){
       this.post("/member/setPrivilegeOfManor", {
                uid:this.my_uid,
                arr:this.limits_form.select_num
            }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.my_uid = ''
                    this.limits_mtk = false
                    this.$emit('up_list_fun')
                }else {
                this.open1(res.message,'warning')
                }

       })
    },
    pass_but(row,lx){
        //  this.my_uid = row.uid
         console.log(row)
           this.my_uid = row
         this.user_test.my_state = lx
         this.user_test.user_mtk = true
    },
    pass_but_qr(){

        this.$confirm('此操作将重置密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             this.post("/member/resetPwd", {
                    uid:this.my_uid,
                }).then(res => {

                    if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.my_uid = ''
                    }else {
                    this.open1(res.message,'warning')
                    }

              })
        })


    },
    jd_but(row,lx){
        this.my_uid = row.uid
        this.user_test.my_state = lx
        this.user_test.user_mtk = true
    },
    jd_but_qr(){
         this.$confirm('此操作将永久解冻用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
            this.post("/member/thawing", {
                    uid:this.my_uid,
                }).then(res => {
                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.my_uid = ''
                    this.$emit('up_list_fun')
                    }else {
                    this.open1(res.message,'warning')
                }

             })
        }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消解冻'
        //   });          
        });
    },
    switchchange(row){

          this.$confirm('是否冻结登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
                this.post("/member/frozenLogin", {
                    uid:row.uid,
                }).then(res => {

                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.$emit('up_list_fun')
                    }else {
                    this.open1(res.message,'warning')
                }

             })
        }).catch(() => {
                  this.$emit('up_list_fun') 
        });

    
    },
    switchchange_gm(row){

          this.$confirm('是否挂卖权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
                this.post("/member/setPrivilegeStatus", {
                    uid:row.uid,
                }).then(res => {

                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.$emit('up_list_fun')
                    }else {
                    this.open1(res.message,'warning')
                }

             })
        }).catch(() => {
                  this.$emit('up_list_fun') 
        });

    
    },
    pass_ej_but(row){
        console.log(row)
        this.ej_mtk = true
        this.my_uid = row
        this.ej_form.number = ''
    },
    pass_ej_but_qr(){
       this.post("/member/updateSafePwd", {
                    uid:this.my_uid,
                    password:this.ej_form.number
                }).then(res => {

                    if(res.error_code == 0){
                      this.ej_mtk = false
                     this.open1(res.result,'success')  //提示框
                    }else {
                     this.open1(res.message,'warning')
                }

             })
    },
    set_but(row){
        this.paw_mtk = true
        this.my_uid = row.uid
    },
    mtk2_but(row){     
        this.mtk2_from.datalist  =   row
        this.mtk2 = true
    },
    gojf_but(row,type,typename){
       
        this.user_name = row.telphone
        this.$router.push({
          path: '/index/currentpoints',
          query: {
            name:this.user_name,
            id:row.uid,
            type:type,
            typename:typename
          }
        })
    },
    gohy_but(row){
   
        this.user_name = row.telphone
        this.$router.push({
          path: '/index/friends',
          query: {
            name:this.user_name,
            id:row.uid
          }
        })
    },
    gohold_but(row,type,typename){
       
       this.user_name = row.telphone
        this.$router.push({
          path: '/index/hold',
          query: {
            name:this.user_name,
            id:row.uid,
            type:type,
            typename:typename
          }
        })

    },
    goharvested_but(row,type,typename){
       
       this.user_name = row.telphone
        this.$router.push({
          path: '/index/harvested',
          query: {
            name:this.user_name,
            id:row.uid,
            type:type,
            typename:typename
          }
        })

    },
    goisharvested_but(row,type,typename){
       
       this.user_name = row.telphone
        this.$router.push({
          path: '/index/isharvested',
          query: {
            name:this.user_name,
            id:row.uid,
            type:type,
            typename:typename
          }
        })

    }

  }
}
</script>


<style scoped>
.imga>>>.el-icon-circle-close {
      color: white;
    }
.el-radio__input.is-checked>>>.el-radio__inner{
    border-color: red;
    background: red;
}
     .title_box{
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .dian{
        width: 8px;
        height: 8px;
        background: #F1C94A;
        border-radius:50%;
        margin-right: 8px;
    }
    .title_name{
        font-size: 14px;;
        font-weight: 400;
        color: #000000;
    }
    .box_top{
       display: flex;
       margin-top:20px;
    }
    .box_top_img{
        width:60px;
        height: 60px;
    }
    .box_top_img>img{
        width:100%;
        height:100%;
        border-radius:50%;
    }
    .box_top_con{
        margin-left:10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .box_img_box{
        display: flex;
        margin-top: 10px;
    }
    .item_img_box:first-child{
        margin-left: 0px;
    }
    .item_img_box{
        flex:1;
        
        margin-left:5px;
    }
    .item_img_box>.imgbox{
        width: 100%;
        height:150px;
    }
    .imgbox{
        width: 100%;
        height:150px;
    }
    .item_img_name{
        margin-top: 10px;
        text-align: center;
    }
</style>